<template>
    <div>
        <commpVxeTable
        :key="reCommpVxeTable"
        :config="dataTableConfig"
        :columns="columnsVxe"
        :formItem="formItem"
        @checkboxChange="checkboxChange"
        ref="administrativeOffice"
        @searchEvent="searchEvent"
        @resetEvent="resetEvent"
        >
        <template v-slot:externalOperations="{data}"  >
            <vxe-form-item>
                <template>
                    <a-button class="blue-btn" @click="addHandele">添加</a-button>
                </template>
            </vxe-form-item>
            <vxe-form-item>
                <template>
                    <a-button class="blue-btn" @click="downloadModel">下载模板</a-button>
                </template>
            </vxe-form-item>
            <vxe-form-item>
                <template>
                    <a-upload style="display: inline-block;" :showUploadList="false" :beforeUpload="beforeUpload" action="" @change="importHandele">
                        <a-button class="blue-btn">导入</a-button>
                    </a-upload>
                </template>
            </vxe-form-item>
            <vxe-form-item>
                <template>
                    <a-button class="blue-btn" @click="exportHandele">导出</a-button>
                </template>
            </vxe-form-item>
            <!-- <vxe-form-item>
                <template>
                    <a-button class="red-btn" @click="deleteBatchHandele">批量删除</a-button>
                </template>
            </vxe-form-item> -->
        </template>
        <template v-slot:operation_fzcjd="{row}" data-desc="自定操作栏">
            <span>{{ fzcjdNum(row.fzcjd) }}</span>
        </template>
        <template v-slot:operation_isChai="{row}" data-desc="自定操作栏">
            <span v-if="row.fsfywqcf == '1'">已拆分</span>
            <span v-else-if="row.fsfywqcf == '0'">未拆分</span>
            <span v-else-if="row.fsfywqcf == '2'">已拆分完成</span>
        </template>
        <template v-slot:operation_btn="{row}" data-desc="自定操作栏">
            <a-form layout="inline" class="search-form" >
                <a-form-item v-if="Number(row.fzbjy) > 0">
                    <a-button class="blue-btn" @click="editHandele(row)">拆分</a-button>
                </a-form-item>
                <a-form-item v-if="row.fsfywqcf == '0'">
                    <a-popconfirm
                        title="您确定要删除这条数据吗?"
                        ok-text="确定"
                        cancel-text="取消"
                        @confirm="deleteHandele(row)"
                        @cancel="cancel"
                        >
                            <a-button class="red-btn">删除</a-button>
                    </a-popconfirm>
                </a-form-item>
            </a-form>
        </template>
        </commpVxeTable>
        <handleModal ref="handleModalRef" :passObj="passObj"  @success="success"></handleModal>
        <chaiFenModal ref="chaiFenModalRef" :passObj="chaiObj"  @success="success"></chaiFenModal>
    </div>
</template>
<script>
import assessCheckApi from './service/api.js'
import commpVxeTable from '@/components/commp-vxe-table/commp-vxe-table.vue'
import handleModal from './handleModal'
import chaiFenModal from './chaiFenModal.vue'
import { deleteData,deleteBatch,getImpInspectorModel,impExcelInspectorTBYC,exportYszbtzData, } from './service/index.js'
export default {
  components: {
    commpVxeTable,handleModal,chaiFenModal
  },
  props:{
  },
  data() {
    return {
      reCommpVxeTable: '',
      dataTableConfig: {
        api: assessCheckApi.list,
        rowId: 'id',
        urlType: true,
        paramet:{
        }
      },
      formItem: [
        {
          label: '预算项目名称',
          model: 'fysxmmc',
        },
      ],
      columnsVxe: [
        {
          type: 'checkbox',
          width: 60,
          fixed: 'left'
        },
        // {
        //   title: '部门经济分类名称',
        //   field: 'fbmjjflmc',
        // },{
        //   title: '功能分类名称',
        //   field: 'fgnflmc',
        // },
        {
          title: '预算项目名称',
          field: 'fysxmmc',
        },
        // {
        //   title: '预算来源名称',
        //   field: 'fyslymc',
        // },
        {
          title: '已支付金额',
          field: 'fyzfje',
        },{
          title: '总指标',
          field: 'fzzb',
        },{
          title: '部门经济分类编码',
          field: 'fbmjjflbm',
        },{
          title: '指标结余',
          field: 'fzbjy',
        },{
          title: '指标来源名称',
          field: 'fzblymc',
        },{
          title: '指标摘要',
          field: 'fzbzy',
        },{
          title: '支出进度',
          field: 'fzcjd',
          width: 100,
          slots: {
            default: 'operation_fzcjd',
          },
        },{
          title: '是否已完全拆分',
          field: 'fsfywqcf',
          slots: {
            default: 'operation_isChai',
          },
        },
        // {
        //   title: '支出项目类别名称',
        //   field: 'fzcxmlbmc',
        // },{
        //   title: '政府经济分类名称',
        //   field: 'fzfjjflmc',
        // },
        {
          title: '操作',
          field: 'id',
          width: 160,
          fixed: 'right',
          align: 'left',
          slots: {
          // 使用插槽模板渲染
            default: 'operation_btn',
          },
        }
      ],
      idList: [],
      passObj: {},
      chaiObj: {}
    }
  },
  methods: {
    // 勾选
    checkboxChange(val){
      //console.log('已选择',val)
      this.idList = []
      if(val.length){
        val.forEach(item => {
            this.idList.push(item.id)
        });
      }
    },
    // 搜索
    searchEvent(){
      this.dataTableConfig.paramet = {
          ...this.dataTableConfig.paramet,
      }
      //console.log(this.dataTableConfig.paramet)
    },
    // 重置
    resetEvent(){
      this.dataTableConfig.paramet = {
          ...this.dataTableConfig.paramet,
      }
    },
    // 添加
    addHandele(){
        this.passObj = {
            title: '添加'
        }
        this.$nextTick(_ => {
            this.$refs.handleModalRef.handleModalVisible = true
        })
    },
    // 编辑
    editHandele(row){
        this.chaiObj = {
            title: row.fysxmmc + '指标拆分',
            valueData: row
        }
        this.$nextTick(_ => {
            this.$refs.chaiFenModalRef.handleModalVisible = true
        })
    },
    // 删除
    deleteHandele(row){
        deleteData({id:row.id}).then(res => {
            if(res.code == 200){
                this.$message.success(res.message)
                this.reCommpVxeTable = Date.now()
            } else {
                this.$message.warning(res.message)
            }
        })
    },
    // 批量删除
    deleteBatchHandele(){
        let that = this
        if(that.idList.length == 0){
            that.$message.warning('请选择删除项目')
        } else {
            that.$confirm({
                title: '您确定要删除这些数据吗?',
                content: '',
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                onOk() {
                    let list = that.idList.toString()
                    //console.log(list)
                    deleteBatch({ids:list}).then(res => {
                        //console.log(res)
                        if(res.code == 200){
                            that.reCommpVxeTable = Date.now()
                            that.$message.success(res.message)
                        } else {
                            that.$message.warning(res.message)
                        }
                    })
                },
                onCancel() {
                    //console.log('Cancel');
                },
            });
        }
    },
    // 下载模板
    downloadModel(){
        let that = this
        that.$confirm({
            title: '您确定要下载当前模板吗?',
            content: '',
            okText: '确定',
            okType: 'info',
            cancelText: '取消',
            onOk() {
                var fileName = '预算指标台账模板'
                getImpInspectorModel().then((data) => {
                    if (!data) {
                        that.$message.warning('文件下载失败')
                        return
                    }
                    if (typeof window.navigator.msSaveBlob !== 'undefined') {
                        window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
                    } else {
                        let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                        let link = document.createElement('a')
                        link.style.display = 'none'
                        link.href = url
                        link.setAttribute('download', fileName + '.xls')
                        document.body.appendChild(link)
                        link.click()
                        document.body.removeChild(link) //下载完成移除元素
                        window.URL.revokeObjectURL(url) //释放掉blob对象
                    }
                })
            },
            onCancel() {
                //console.log('Cancel');
            },
        });
    },
    beforeUpload(e){
        return false
    },
    // 导入
    importHandele({file}){
        var that = this
        if(typeof file.uid !== 'undefined') {
            // if(file.name.indexOf(".xls") !== -1 || file.name.indexOf(".xlsx") !==-1) {
            const fileData = new FormData();
            fileData.append("file",file);
            //console.log('fileData',fileData)
            impExcelInspectorTBYC(fileData).then(res => {
                if(res.code == 200){
                    // that.reCommpVxeTable = Date.now()
                    that.$message.success(res.message)
                    that.reCommpVxeTable = Date.now()
                } else {
                    that.$message.warning(res.message)
                }
            })
            // }
        }
    },
    // 导出
    exportHandele(){
        let that = this
        if(that.idList.length == 0){
            that.$message.warning('请选择导出项')
        } else {
            that.$confirm({
                title: '您确定要导出这些数据吗?',
                content: '',
                okText: '确定',
                okType: 'info',
                cancelText: '取消',
                onOk() {
                    var fileName = '预算指标台账数据'
                    let list = that.idList.toString()
                    exportYszbtzData({ids: list}).then((data) => {
                        // //console.log(data)
                        if (!data) {
                            that.$message.warning('文件下载失败')
                            return
                        }
                        if (typeof window.navigator.msSaveBlob !== 'undefined') {
                            window.navigator.msSaveBlob(new Blob([data], { type: 'application/vnd.ms-excel' }), fileName + '.xls')
                        } else {
                            let url = window.URL.createObjectURL(new Blob([data], { type: 'application/vnd.ms-excel' }))
                            let link = document.createElement('a')
                            link.style.display = 'none'
                            link.href = url
                            link.setAttribute('download', fileName + '.xls')
                            document.body.appendChild(link)
                            link.click()
                            document.body.removeChild(link) //下载完成移除元素
                            window.URL.revokeObjectURL(url) //释放掉blob对象
                        }
                    })
                },
                onCancel() {
                    //console.log('Cancel');
                },
            });
        }
    },
    fzcjdNum(num){
        if(num){
            var number = Number(num * 100).toFixed(2) + '%'//保留两位小数
            return number
        }
    },
    cancel(){},
    // 弹窗提交成功
    success(){
      // 刷新表格 清空id数组
      this.$refs.administrativeOffice.searchEvent()
      this.idList = []
    },
  },
}
</script>
<style lang="less">

</style>
